<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>箭头函数</h1>

<script>
    //1.如何定义箭头函数

    let sayHello = ()=>console.log('Hello,Javascript');
    sayHello();

    //2.带多个参数的箭头函数
    let add = (x,y)=>{
        console.log(x+y);
        return x+y;
    }
    console.log(add(10,7));

    //3.this指向问题
    //箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。
    /*
    var sum = 100;
    var obj = {
        sum: 10,
        fun:function(){
            let f =()=>console.log(this.sum);
            return f;
        }
    };
    function con(callback) {
        callback();
    }
    obj.fun()();
    con(obj.fun());*/

    //如果使用匿名函数
    //说明匿名函数里的this指向window对象。

    /*
    var sum = 100;
    var obj = {
        sum: 10,
        fun:function(){
            //let f =()=>console.log(this.sum);
            let f = function(){
                console.log(this.sum);
            };
            return f;
        }
    };
    function con(callback) {
        callback();
    }
    obj.fun()();
    con(obj.fun());*/

    let sum = 100;
    var obj = {
        sum: 10,
        fun:function(){
            //let f =()=>console.log(this.sum);
            let f = function(){
                console.log(this.sum);
            };
            return f;
        }
    };
    function con(callback) {
        callback();
    }
    obj.fun()();
    con(obj.fun());


</script>
</body>
</html>